<div class="row margin-0">
	<div class="col-md-6 col-sm-6 col-xs-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">
					树数据
					<div class="btn btn-default btn-xs auto-collapse active" data-toggle="button" aria-pressed="false" autocomplete="off">自动折叠</div>
					<div class="btn btn-default btn-xs tree-chk active" data-toggle="button" aria-pressed="false" autocomplete="off">复选</div>
					<div class="btn btn-default btn-xs collapseAll active" data-toggle="button" aria-pressed="false" autocomplete="off">默认折叠</div>
					<div class="btn btn-default btn-xs showTitle active" data-toggle="button" aria-pressed="false" autocomplete="off">使用Title</div>
					<select class="style btn btn-xs" style="border: 1px solid #adadad;">
						<option value="normal">normal</option>
						<option value="file" selected>file</option>
						<option value="department">department</option>
					</select>
					<div class="btn btn-xs btn-danger pull-right redo">重绘</div>
				</h3>
			</div>
			<div class="panel-body tree-data padding-0" contenteditable="true" style="height: 550px; overflow: auto;">
				<pre class="margin-0" style="border: none;">
	[ {
		text : '节点1',
		data : {
			a : 1
		},
		children : [ {
			text : '节点11',
			children : [ {
				active : true,
				text : '节点111',
				data : {
					a : 2
				},
			}, {
				checked : true,
				text : '节点112',
			} ]
		}, {
			text : '节点12',
			children : []
		}, {
			text : '节点12'
		} ]
	}, {
		text : '节点2',
		icon : 'icon-caret-down',
		children : [ {
			text : '节点21',
		}, {
			text : '节点22',
		} ]
	} ]
				</pre>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-sm-6 col-xs-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">树</h3>
			</div>
			<div class="panel-body tree tree"></div>
		</div>
	</div>
</div>
<script src="${request.contextPath}/js/suredy-tree.js"></script>
<script type="text/javascript">
	$(function() {
		$('div.btn.redo').on('click', function() {
			$('.tree').tree(eval('(' + $('.tree-data pre').html() + ')'), {
				autoCollapse : $('.btn.auto-collapse.active').length > 0,
				checkbox : $('.btn.tree-chk.active').length > 0,
				collapseAll : $('.btn.collapseAll.active').length > 0,
				click : function() {
					var data = $.suredy.tree.data($.suredy.tree.checked($('.suredy-tree')));
					console.log(data);
					console.log($(this).data('tree-data'));
				},
				style : $('.style').val(),
				showTitle : $('.btn.showTitle.active').length > 0
			});
		});

		$('div.btn.redo').trigger('click');
	});
</script>